<template>
	<div class="container-wrap">
		<div class="container regist-container">
			<div class="title">{{ $t('forgot_password') }}</div>
			<div class="darkbannerwrap"></div>

			<div>
				<div class="form-group">
					<input type="email" name="email" v-model="email" :placeholder="$t('email')">
				</div>

				<div class="form-verification-group">
					<input id="vcode" type="text" name="vcode" v-model="vcode" :placeholder="$t('verification_code')">

					<button id="get-vcode" :disabled="!canResend" @click="sendVcode">
						{{ $t('get_vcode') }}
					</button>
				</div>

				<div class="form-group">
					<input type="password" name="password" v-model="passwd" :placeholder="$t('password')">
				</div>

				<div class="form-group">
					<input type="password" name="check_password" v-model="checkPasswd"
						:placeholder="$t('check_password')">
				</div>


				<button class="submit" @click="reset">{{ $t('reset') }}</button>

				<span v-show="tips" class="tips">{{ tips }}</span>
			</div>
		</div>
	</div>
</template>

<script type="module">
import { UserService } from '@/common/common.object'

export default {
	data() {
		return {
			email: null,
			passwd: null,
			checkPasswd: null,
			vcode: null,

			canResend: true,

			tips: null,
		};
	},
	methods: {
		sendVcode() {
			console.log('sendVcode...');
			this.canResend = false;

			UserService.sendResetPasswordVcode(this.email)
				.then(() => {
					console.log('sendVcode: success!');

					setInterval(() => {
						this.canResend = true;
					}, 60 * 1000);
				}).catch(error => {
					this.canResend = true;
					this.tips = error;
				});
		},
		reset() {
			if (this.passwd !== this.checkPasswd) {
				this.tips = "两次密码输入不一致";
				return;
			}


			UserService.resetPassword(this.email, this.passwd, this.vcode)
				.then(result => {
					alert("重置密码成功！");
				}, error => {
					this.tips = error;
				});
		}
	}
};
</script>


<style scoped>
@import '@/assets/common_login_register_forgot.css';
</style>